<template>
	<view class="container">
		<view class="flex diygw-autoview diygw-col-24 flex-direction-column autoview-clz">
			<view class="diygw-absolute autoview_0">
				<view class="flex diygw-col-18 search-clz">
					<view class="diygw-search">
						<view class="flex1 align-center flex padding-xs solid radius">
							<text class="diy-icon-search" style="color: "></text>
							<input class="flex1" name="search" type="" v-model="name" placeholder="请输入活动名称" />
						</view>
						<view @click="searchByName" style="color: #333 !important"
							class="diygw-tag margin-left-xs radius-xs"> 搜索 </view>
					</view>
				</view>
			</view>
			<view class="search-filter" @tap="orderbyChange" :class="{'text-theme': hasChoose}">
				<image class="search-filter-image" src="https://www.dtxtkj.com/app/images/filter.png"></image>
			</view>
			<fjj-condition ref='condition' @touchmove.stop :color="color" :list="filterData"
				:defaultValue="defaultValue" @result="resultConditon" />
		</view>

		<!-- 列表 -->
		<view class="data-list">
			<view v-for="(item, rowIndex) in datalist" :key="rowIndex">
				<view class="data-item" @click="goToDetail(item)">
					<view class="data-info">
						<text class="data-name">
							<text>{{ item.activeName }}</text>
						</text>
						<text class="data-info-detail">活动商品: 鸡蛋</text>
						<text class="data-info-detail">参与门店: {{ item.storeIds }}</text>
						<text class="data-info-detail">
							<!-- 开始时间:<uni-dateformat :date="item.startAt"></uni-dateformat> -->
							开始时间: {{ formatDate(item.startAt) }}
						</text>
						<text class="data-info-detail">
							结束时间: {{  formatDate(item.endAt) }}
						</text>
					</view>
				</view>
				<view class="data-item-btn">
					<button class="btn delete" @click="deleteObj(item)">删除</button>
					<button class="btn view" @click="goToDetail(item)">编辑</button>
				</view>
			</view>
		</view>
		
		<!-- 悬浮加号按钮 -->
		<view class="float-button" @click="handleFloatButtonClick">
			<image class="plus-icon" src="/static/add.png"></image>
		</view>
		
	</view>
</template>

<script>
	import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
	import filterData from '@/common/data/goods/goods_filter.js';
	import dataDictionary from '@/common/data/dataDictionary.js';
	export default {
		data() {
			return {
				color: '#4D7BFE',
				hasChoose: false,
				defaultValue: {},
				filterData: filterData,
				datalist: [],
				goodsOpt: dataDictionary.goods,
				sourceOpt: {},
				statusOpt: {},
				name: '',
				searchParam: {
					activeName: '',
					// category: '',
					// source: '',
					// status: '',
				},
				defaultImage: '/static/no_image.png',
			};
		},
		components: {
			fjjCondition,
		},
		computed: {

		},
		
		onLoad() {
			// 初始上商品详情里面的枚举值
			if (this.goodsOpt) {
				let sourceOpts = this.goodsOpt.source;
				for (let i = 0; i < sourceOpts.length; i++) {
					this.sourceOpt[sourceOpts[i].value] = sourceOpts[i].text;
				}

				let statusOpts = this.goodsOpt.status;
				for (let i = 0; i < statusOpts.length; i++) {
					this.statusOpt[statusOpts[i].value] = statusOpts[i].text;
				}
			}

			// 初始化过滤值
			this.initFilterData();
			this.onSearch();
		},

		onShow() {
			this.onSearch();
		},

		methods: {

			handleImageError(item) {
				item.image = this.defaultImage;
			},

			async initFilterData() {
				if (this.filterData && this.goodsOpt) {
					for (let i = 0; i < this.filterData.length; i++) {
						if (this.goodsOpt[this.filterData[i].key]) {
							this.filterData[i].detailList = this.goodsOpt[this.filterData[i].key];
						}
					}
				}
			},

			//筛选返回值
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
				console.log("===========obj", obj);
				this.searchParam.source = obj.result.source;
				this.searchParam.status = obj.result.status;
				this.searchParam.buyAt = obj.result.buyAt;
				this.onSearch();
			},
			orderbyChange(obj) {
				console.log("=======orderbyChange", 1);
				this.$refs.condition.visibleDrawer = true;
			},
			// 跳转到商品详情页
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/active/active?id=${item.id}&formData=${JSON.stringify(item)}`,
				});
			},


			deleteObj(item) {
				this.$api.goodsDelete(item.id).then(result => {
					// 失败进行的操作
					uni.showToast({
						title: "删除成功!",
						duration: 3000
					});
					this.onSearch();
					return;
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "删除失败!",
						duration: 3000
					});
					return;
				})
			},

			searchByName() {
				this.searchParam.activeName = this.name;
				this.onSearch();
			},

			formatDate(dateString) {
				return new Date(dateString).toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit',
					hour12: false
				})
			},

			async onSearch() {
				this.$api.storeActiveList(this.searchParam).then(result => {
					this.datalist = result ? result : [];
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				})
			},
			
			handleFloatButtonClick() {
				uni.navigateTo({ url: '/pages/employee/employee' });
			},
		},
	};
</script>

<style lang="less" scoped>
	@import url("@/common/css/list_new.less");
</style>